<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    @Author 硕鼠
    @Date 2020/4/6 10:24
    @Version 1.0
    @Description 创建年历
  -->
    <meta charset="UTF-8">
    <title>提取事件</title>
    <script>
        window.onload = function () {
            //将要显示的数据放到数组中
            var arr= ['快过年了，大家商量去哪去玩啊',
                        '二月来了',
                        '三月来了',
                        '四月来了'];
            var oDiv = document.getElementById("tab");
            var aLi = oDiv.getElementsByTagName("li");
            var oTxt = oDiv.getElementsByTagName("div")[0]; //要加上[0],不然没有显示

            for (var i = 0;i < aLi.length;i ++){
                aLi[i].index = (i + 1); //加上编号
                aLi[i].onmouseover = function () {
                    for (var i = 0;i < aLi.length;i ++){
                        aLi[i].className = '';
                    }
                    this.className = 'active';

                    oTxt.innerHTML = '<h2>' + this.index + '月活动</h2><p>'+arr[this.index-1]+'</p>';
                    // alert(oTxt.innerHTML);
                };
            }

        };
    </script>
</head>
<body>
    <div id="tab" class="calendar-grid">
        <ul>
            <li class = "active"><h2>1</h2><p>JAN</p></li>
            <li ><h2>2</h2><p>FER</p></li>
            <li ><h2>3</h2><p>MAR</p></li>
            <li ><h2>4</h2><p>APR</p></li>
            <li ><h2>5</h2><p>MAY</p></li>
            <li ><h2>6</h2><p>JUN</p></li>
            <li ><h2>7</h2><p>JUL</p></li>
            <li ><h2>8</h2><p>AUG</p></li>
            <li ><h2>9</h2><p>SEP</p></li>
            <li ><h2>10</h2><p>OCT</p></li>
            <li ><h2>11</h2><p>MOV</p></li>
            <li ><h2>12</h2><p>DEC</p></li>
        </ul>
        <div class="text">
            <h2>1月活动</h2>
            <p>快过年了，大家商量去哪去玩啊</p>
        </div>
    </div>
</body>
</html>